<template>
	<view>
		<!-- 遮罩层 -->
		<view class="popup-mask" v-if="show"></view>

		<!-- 弹窗内容 -->
		<view class="popup-container" v-if="show">
			<view class="popup-content" style="height: 1000rpx">
				<view class="tips">
					<!-- 		<view>恭喜您通过推广成功注册，平台已发放您</view>
					<view>的专属优惠券大礼包至个人中心-优惠券</view> -->
					<view class=""></view>
					<view class=""></view>
				</view>
				<!-- 优惠券列表 -->
				<view class="coupon-list">
					<view class="coupon-item un-used" v-for="(item, index) in list" :key="index">
						<view class="coupon-left">
							<view class="coupon-value">
								<text class="coupon-flats">￥</text>
								{{ parseInt(item.amount) }}
							</view>
							<view class="coupon-unit">优惠券</view>
						</view>
						<view class="coupon-right">
							<view class="coupon-title">{{ item.title }}</view>
							<view class="coupon-date">有效期：{{ item.days }}日</view>
							<view class="coupon-footer">
								<!-- <view class="coupon-rules">
									<text>使用规则</text>
									<image v-if="!showRules[index]" class="gray-detail-icon" src="/static/personalCenter/gray-right.png" mode="aspectFill"></image>
									<image
										v-if="showRules[index]"
										class="gray-detail-icon"
										src="/static/personalCenter/gray-right.png"
										mode="aspectFill"
										style="transform: rotate(-90deg); transform-origin: 70% 50%"
									></image>
								</view> -->
							</view>
						</view>
					</view>
					<!-- 优惠券使用规则 -->
					<view v-if="false" class="rules-details-warps">
						<view class="rules-shape">
							<text class="rules-shape-item"></text>
							<text class="rules-shape-item"></text>
						</view>
						<view class="rules-content">
							<view class="rules-content-warps">
								<view class="rule-title">使用规则：</view>
								<view class="rule-item">1、优惠券可降低产品的价格，是一种常见的消费者营业推广工具。</view>
								<view class="rule-item">2、优惠券可以印在杂志的插页上</view>
								<view class="rule-item">3、或夹在报纸中随附送</view>
							</view>
						</view>
					</view>
				</view>
				<view class="btn-warps">
					<view class="common-btn action-btn" @click="handlePublishTrip">全部领取</view>
				</view>

				<view class="popup-footer">
					<image src="/static/personalCenter/auth-close.png" mode="aspectFill" @click="close"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { isLoggedIn } from '@/utils/auth';
let timer = null;
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		couponsData: {
			type: Array,
			default: []
		}
	},
	watch: {
		visible(val) {}
	},
	data() {
		return {
			isChecked: false,
			// tousedCoupons: [{}, {}, {}], // 未使用优惠券数据
			list: [],
			show: false,
			showRules: {} // 控制规则显示
		};
	},

	created() {
		this.getList();
	},

	methods: {
		getList() {
			clearTimeout(timer);
			if (!isLoggedIn()) {
				timer = setTimeout(() => {
					this.getList();
				}, 60000);
			} else {
				this.$http
					.get('/h5/user/line/getReceiveOwnerCoupon')
					.then((res) => {
						this.list = res.data;
						if (this.list.length) this.show = true;
					})
					.finally(() => {
						timer = setTimeout(() => {
							this.getList();
						}, 60000);
					});
			}
		},
		close() {
			this.show = false;
			this.$emit('update:visible', false);
		},
		handlePublishTrip() {
			this.$emit('update:data');

			this.$http.get('/h5/user/line/receiveOwnerCoupon').then((res) => {
				this.show = false;
				uni.showToast({
					title: '领取成功'
					// icon: 'none'
				});
			});
		}
	}
};
</script>

<style scoped>
.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 998;
}

.popup-container {
	position: fixed;
	top: 13%;
	left: 0;
	right: 0;
	z-index: 999;
	transition: all 0.3s ease;
	margin: 0 26rpx;
}

.popup-content {
	width: 100%;

	background-image: url('~@/static/home/packs-bg.png');
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/* 关闭按钮样式 */
.popup-footer {
	position: absolute;
	bottom: -100rpx;
	left: 340rpx;
}

.popup-footer image {
	width: 48rpx;
	height: 48rpx;
}

/* 优惠券列表样式 */
.btn-warps {
	padding-bottom: 58rpx;
}

.action-btn {
	margin: 40rpx 90rpx 0 90rpx;
}

.tips {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 28rpx;
	color: #ffffff;
	line-height: 48rpx;
	text-align: center;
	padding-top: 164rpx;
	padding-bottom: 54rpx;
}

.coupon-list {
	margin: 0 90rpx 20rpx 90rpx;
}

.coupon-item {
	/* width: calc(100% - 116rpx);   */
	display: flex;
	overflow: hidden;
	position: relative;
	margin-bottom: 20rpx;
}

.coupon-left {
	width: 160rpx;
	text-align: center;
	padding-top: 38rpx;
}

.coupon-item.un-used {
	background-image: url('~@/static/personalCenter/coupon-1.png');
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.coupon-value {
	font-family: DIN Pro, DIN Pro;
	font-weight: 700;
	font-size: 48rpx;
	color: #ffffff;
	line-height: 42rpx;
	padding-bottom: 12rpx;
}

.coupon-flats {
	font-size: 32rpx;
}

.coupon-unit {
	font-family: Source Han Sans, Source Han Sans;
	font-size: 24rpx;
	color: #ffffff;
}

.coupon-right {
	flex: 1;
	padding: 26rpx 20rpx 22rpx 44rpx;
}

.coupon-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 28rpx;
	color: #0b1f20;
	line-height: 42rpx;
	letter-spacing: 1px;
	margin-bottom: 14rpx;
}

.coupon-date {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 24rpx;
	color: #999999;
	line-height: 36rpx;
	margin-bottom: 10rpx;
}

.coupon-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.coupon-rules {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #697592;
	line-height: 36rpx;
	display: flex;
	align-items: center;
}

.gray-detail-icon {
	width: 28rpx;
	height: 28rpx;
}

.rules-content {
	padding: 8rpx;
	background: #ffffff;
	border-radius: 16rpx;
	/* position: absolute;
  left: 0rpx;
  bottom: 0; */
}

.rules-content-warps {
	border-radius: 16rpx;
	border: 2rpx dashed #ff7937;
	padding: 20rpx 0 20rpx 20rpx;
}

.rule-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 28rpx;
	color: #0b1f20;
	line-height: 42rpx;
	padding-bottom: 12rpx;
}

.rule-item {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 26rpx;
	color: #697592;
	line-height: 40rpx;
}

.rules-shape {
	display: flex;
	justify-content: space-between;
	padding: 0 40rpx;
}

.rules-shape-item {
	width: 12rpx;
	height: 20rpx;
	background: #ff7937;
	display: block;
}
</style>
